<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			
			<h1>条件渲染 </h1>
			
			<h2>1. 判断指令 v-if v-else-if v-else</h2>
			<p>符合条件标签存在，会显示</p>
			<p>不符合条件，标签会被移除掉</p>
			<div v-if="level == 'A'">甲等</div>
			<div v-else-if="level == 'B'">乙等</div>
			<div v-else-if="level == 'C'">丙等</div>
			<div v-else>其他</div>
			
			<h2>2. v-show</h2>
			<p>符合条件标签存在，且会显示</p>
			<p>不符合条件标签仍旧存在，但不会显示(通过样式隐藏 display: none)</p>
			<div v-show="level == 'A'">甲等</div>
			<div v-show="level == 'B'">乙等</div>
		</div>

		<script>
			const vm = Vue.createApp({
				data() {
					return {
						msg: "Hello Vue!",
						name: "张三",
						level: 'A'
					}
				}
			})
			vm.mount("#app");
		</script>
	</body>
</html>
